<template>
  <div class="driver-detail-page">
    <!-- 页面标题与返回 -->
    <el-page-header @back="handleBack" content="司机信息管理" />

    <!-- 标签页：实名认证 / 信息修改 -->
    <el-tabs v-model="activeTab" class="mt-4">
      <!-- 实名认证标签页 -->
      <el-tab-pane label="实名认证" name="auth">
        <!-- 身份证认证卡片 -->
        <el-card class="mb-6">
          <template #header>
            <div class="card-header flex justify-between items-center">
              <span class="text-lg font-bold">身份证实名认证</span>
              <el-button
                type="warning"
                size="small"
                @click="resetIdCardForm"
                :loading="resetIdCardLoading"
              >
                重置认证信息
              </el-button>
            </div>
          </template>

          <el-form
            :model="idCardForm"
            :rules="idCardRules"
            ref="idCardRef"
            label-width="140px"
            class="mt-4"
          >
            <!-- 基础信息 -->
            <el-form-item label="真实姓名" prop="name">
              <el-input
                v-model="idCardForm.name"
                placeholder="请输入与身份证一致的姓名"
              />
            </el-form-item>

            <el-form-item label="身份证号" prop="idNumber">
              <el-input
                v-model="idCardForm.idNumber"
                placeholder="18位身份证号码"
                maxlength="18"
              />
            </el-form-item>

            <!-- 有效期设置 -->
            <el-form-item label="证件有效期" required>
              <div class="date-range-container">
                <el-date-picker
                  v-model="idCardForm.startDate"
                  type="date"
                  placeholder="开始日期"
                  :disabled="idCardForm.isPermanent"
                  class="w-[48%]"
                />
                <span class="mx-2">至</span>
                <el-date-picker
                  v-model="idCardForm.expireDate"
                  type="date"
                  placeholder="失效日期"
                  :disabled="idCardForm.isPermanent"
                  class="w-[48%]"
                />
                <el-checkbox v-model="idCardForm.isPermanent" class="mt-2">
                  长期有效
                </el-checkbox>
              </div>
              <div class="text-xs text-red-500 mt-1">
                注：证件过期后将无法接单，请及时更新
              </div>
            </el-form-item>

            <!-- 身份证正面上传（修复插槽问题） -->
            <el-form-item label="身份证正面" prop="frontFile">
              <div class="upload-wrapper">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :on-change="handleIdCardUpload('front')"
                  :on-remove="handleIdCardRemove('front')"
                  :file-list="idCardForm.frontFileList"
                  :limit="1"
                  :on-exceed="handleExceed"
                  class="upload-card"
                >
                  <!-- 仅使用默认插槽，不混合其他子元素 -->
                  <template #default>
                    <div class="upload-placeholder front-placeholder">
                      <el-icon class="upload-icon"><Camera /></el-icon>
                      <p class="upload-text">点击上传</p>
                      <p class="upload-hint">支持JPG/PNG，≤2MB</p>
                    </div>
                  </template>
                  <template #file="{ file }">
                    <div class="upload-preview">
                      <img
                        :src="file.url"
                        class="preview-img"
                        alt="身份证正面"
                      />
                      <div class="preview-mask">
                        <el-button
                          icon="Delete"
                          circle
                          size="small"
                          class="delete-btn"
                          @click.stop="handleRemoveFile(file, 'front')"
                        />
                      </div>
                    </div>
                  </template>
                  <!-- 提示信息也通过插槽传递，不直接写在组件内 -->
                  <template #tip>
                    <div class="text-xs text-gray-500">
                      支持JPG/PNG格式，大小不超过2MB
                    </div>
                  </template>
                </el-upload>
                <div class="upload-desc">
                  <p>• 需拍摄身份证有照片的一面</p>
                  <p>• 确保信息清晰，无遮挡/反光</p>
                </div>
              </div>
            </el-form-item>

            <!-- 身份证背面上传（修复插槽问题） -->
            <el-form-item label="身份证背面" prop="backFile">
              <div class="upload-wrapper">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :on-change="handleIdCardUpload('back')"
                  :on-remove="handleIdCardRemove('back')"
                  :file-list="idCardForm.backFileList"
                  :limit="1"
                  :on-exceed="handleExceed"
                  class="upload-card"
                >
                  <template #default>
                    <div class="upload-placeholder back-placeholder">
                      <el-icon class="upload-icon"><Camera /></el-icon>
                      <p class="upload-text">点击上传</p>
                      <p class="upload-hint">支持JPG/PNG，≤2MB</p>
                    </div>
                  </template>
                  <template #file="{ file }">
                    <div class="upload-preview">
                      <img
                        :src="file.url"
                        class="preview-img"
                        alt="身份证背面"
                      />
                      <div class="preview-mask">
                        <el-button
                          icon="Delete"
                          circle
                          size="small"
                          class="delete-btn"
                          @click.stop="handleRemoveFile(file, 'back')"
                        />
                      </div>
                    </div>
                  </template>
                </el-upload>
                <div class="upload-desc">
                  <p>• 需拍摄身份证有国徽的一面</p>
                  <p>• 确保有效期清晰可见</p>
                </div>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="submitIdCard"
                :loading="submitIdCardLoading"
                class="submit-btn"
              >
                提交身份证认证
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 驾驶证认证卡片 -->
        <el-card>
          <template #header>
            <div class="card-header flex justify-between items-center">
              <span class="text-lg font-bold">驾驶证实名认证</span>
              <el-button
                type="warning"
                size="small"
                @click="resetLicenseForm"
                :loading="resetLicenseLoading"
              >
                重置认证信息
              </el-button>
            </div>
          </template>

          <el-form
            :model="licenseForm"
            :rules="licenseRules"
            ref="licenseRef"
            label-width="140px"
            class="mt-4"
          >
            <!-- 基础信息 -->
            <el-form-item label="驾驶证号" prop="licenseNumber">
              <el-input
                v-model="licenseForm.licenseNumber"
                placeholder="请输入驾驶证编号"
              />
            </el-form-item>

            <el-form-item label="驾龄（年）" prop="drivingAge">
              <el-input-number
                v-model="licenseForm.drivingAge"
                :min="3"
                :step="1"
                placeholder="要求3年以上驾龄"
              />
            </el-form-item>

            <!-- 有效期设置 -->
            <el-form-item label="证件有效期" required>
              <div class="date-range-container">
                <el-date-picker
                  v-model="licenseForm.startDate"
                  type="date"
                  placeholder="开始日期"
                  :disabled="licenseForm.isPermanent"
                  class="w-[48%]"
                />
                <span class="mx-2">至</span>
                <el-date-picker
                  v-model="licenseForm.expireDate"
                  type="date"
                  placeholder="失效日期"
                  :disabled="licenseForm.isPermanent"
                  class="w-[48%]"
                />
                <el-checkbox v-model="licenseForm.isPermanent" class="mt-2">
                  长期有效
                </el-checkbox>
              </div>
            </el-form-item>

            <!-- 驾驶证照片上传（修复插槽问题） -->
            <el-form-item label="驾驶证照片" prop="licenseFile">
              <div class="upload-wrapper">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :on-change="handleLicenseUpload"
                  :on-remove="handleLicenseRemove"
                  :file-list="licenseForm.fileList"
                  :limit="1"
                  :on-exceed="handleExceed"
                  class="upload-card"
                >
                  <template #default>
                    <div class="upload-placeholder license-placeholder">
                      <el-icon class="upload-icon"><Camera /></el-icon>
                      <p class="upload-text">点击上传</p>
                      <p class="upload-hint">支持JPG/PNG，≤2MB</p>
                    </div>
                  </template>
                  <template #file="{ file }">
                    <div class="upload-preview">
                      <img :src="file.url" class="preview-img" alt="驾驶证" />
                      <div class="preview-mask">
                        <el-button
                          icon="Delete"
                          circle
                          size="small"
                          class="delete-btn"
                          @click.stop="handleRemoveFile(file, 'license')"
                        />
                      </div>
                    </div>
                  </template>
                </el-upload>
                <div class="upload-desc">
                  <p>• 需拍摄驾驶证主页（含个人信息）</p>
                  <p>• 确保文字清晰，无遮挡</p>
                </div>
              </div>
            </el-form-item>

            <el-form-item label="车辆信息" prop="vehicleInfo">
              <el-input
                v-model="licenseForm.vehicleInfo"
                type="textarea"
                rows="3"
                placeholder="请填写车辆品牌、型号、车牌号等信息"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="submitLicense"
                :loading="submitLicenseLoading"
                class="submit-btn"
              >
                提交驾驶证认证
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 信息修改标签页 -->
      <el-tab-pane label="信息修改" name="info">
        <el-card>
          <el-form
            :model="profileForm"
            :rules="profileRules"
            ref="profileRef"
            label-width="140px"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="profileForm.name" />
            </el-form-item>

            <el-form-item label="手机号" prop="phone">
              <el-input v-model="profileForm.phone" disabled />
              <el-button
                type="text"
                @click="openChangePhoneDialog"
                class="ml-2"
              >
                修改手机号
              </el-button>
            </el-form-item>

            <el-form-item label="密码管理">
              <el-button type="text" @click="openChangePwdDialog">
                修改登录密码
              </el-button>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="submitProfile"
                :loading="submitProfileLoading"
              >
                保存信息
              </el-button>
              <el-button type="warning" @click="resetProfileForm" class="ml-2">
                重置表单
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <!-- 修改手机号弹窗 -->
    <el-dialog v-model="changePhoneVisible" title="修改手机号">
      <el-form
        :model="phoneForm"
        :rules="phoneRules"
        ref="phoneRef"
        label-width="120px"
      >
        <el-form-item label="原手机号" prop="oldPhone">
          <el-input v-model="phoneForm.oldPhone" disabled />
        </el-form-item>
        <el-form-item label="新手机号" prop="newPhone">
          <el-input v-model="phoneForm.newPhone" maxlength="11" />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <div class="flex gap-2">
            <el-input
              v-model="phoneForm.code"
              placeholder="6位验证码"
              maxlength="6"
              class="flex-1"
            />
            <el-button
              type="primary"
              :disabled="countdown > 0 || !phoneForm.newPhone"
              @click="sendCode"
            >
              {{ countdown > 0 ? `${countdown}s后重发` : "发送验证码" }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="changePhoneVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="confirmChangePhone"
          :loading="changePhoneLoading"
        >
          确认修改
        </el-button>
      </template>
    </el-dialog>

    <!-- 修改密码弹窗 -->
    <el-dialog v-model="changePwdVisible" title="修改密码">
      <el-form
        :model="pwdForm"
        :rules="pwdRules"
        ref="pwdRef"
        label-width="120px"
      >
        <el-form-item label="原密码" prop="oldPwd">
          <el-input v-model="pwdForm.oldPwd" type="password" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="pwdForm.newPwd" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input v-model="pwdForm.confirmPwd" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="changePwdVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="confirmChangePwd"
          :loading="changePwdLoading"
        >
          确认修改
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Camera, Delete } from "@element-plus/icons-vue";
import type { FormInstance, UploadFile, UploadRawFile } from "element-plus";

// 状态管理
const activeTab = ref("auth");
const idCardRef = ref<FormInstance>();
const idCardForm = reactive({
  name: "",
  idNumber: "",
  startDate: "" as string | Date,
  expireDate: "" as string | Date,
  isPermanent: false,
  frontFileList: [] as UploadFile[],
  backFileList: [] as UploadFile[],
});
const idCardRules = reactive({
  name: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
  idNumber: [
    { required: true, message: "请输入身份证号", trigger: "blur" },
    {
      pattern: /(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      message: "请输入正确的身份证号",
      trigger: "blur",
    },
  ],
  frontFile: [
    { required: true, message: "请上传身份证正面", trigger: "change" },
  ],
  backFile: [
    { required: true, message: "请上传身份证背面", trigger: "change" },
  ],
});
const submitIdCardLoading = ref(false);
const resetIdCardLoading = ref(false);

const licenseRef = ref<FormInstance>();
const licenseForm = reactive({
  licenseNumber: "",
  drivingAge: 3,
  startDate: "" as string | Date,
  expireDate: "" as string | Date,
  isPermanent: false,
  fileList: [] as UploadFile[],
  vehicleInfo: "",
});
const licenseRules = reactive({
  licenseNumber: [
    { required: true, message: "请输入驾驶证号", trigger: "blur" },
  ],
  drivingAge: [
    { required: true, message: "请输入驾龄", trigger: "blur" },
    { type: "number", min: 3, message: "驾龄需大于等于3年", trigger: "blur" },
  ],
  licenseFile: [
    { required: true, message: "请上传驾驶证照片", trigger: "change" },
  ],
  vehicleInfo: [{ required: true, message: "请填写车辆信息", trigger: "blur" }],
});
const submitLicenseLoading = ref(false);
const resetLicenseLoading = ref(false);

const profileRef = ref<FormInstance>();
const profileForm = reactive({
  name: "",
  phone: "13800138000",
});
const profileRules = reactive({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
});
const submitProfileLoading = ref(false);

const changePhoneVisible = ref(false);
const phoneRef = ref<FormInstance>();
const phoneForm = reactive({
  oldPhone: "13800138000",
  newPhone: "",
  code: "",
});
const phoneRules = reactive({
  newPhone: [
    { required: true, message: "请输入新手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
  ],
  code: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { len: 6, message: "验证码为6位数字", trigger: "blur" },
  ],
});
const countdown = ref(0);
const changePhoneLoading = ref(false);

const changePwdVisible = ref(false);
const pwdRef = ref<FormInstance>();
const pwdForm = reactive({
  oldPwd: "",
  newPwd: "",
  confirmPwd: "",
});
const pwdRules = reactive({
  oldPwd: [{ required: true, message: "请输入原密码", trigger: "blur" }],
  newPwd: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
  ],
  confirmPwd: [
    { required: true, message: "请确认新密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== pwdForm.newPwd) callback(new Error("两次密码输入不一致"));
        else callback();
      },
      trigger: "blur",
    },
  ],
});
const changePwdLoading = ref(false);

// 初始化数据
onMounted(() => {
  idCardForm.name = "张三";
  idCardForm.idNumber = "110101199001011234";
  idCardForm.startDate = "2020-01-01";
  idCardForm.expireDate = "2040-01-01";

  licenseForm.licenseNumber = "111122223333444455";
  licenseForm.drivingAge = 5;
  licenseForm.startDate = "2018-05-01";
  licenseForm.expireDate = "2028-05-01";
  licenseForm.vehicleInfo = "大众帕萨特 京A12345";

  profileForm.name = "张三";
});

// 上传相关方法
const handleIdCardUpload = (
  type: "front" | "back",
  file: UploadFile,
  fileList: UploadFile[]
) => {
  if (type === "front") idCardForm.frontFileList = fileList;
  else idCardForm.backFileList = fileList;
};
const handleIdCardRemove = (
  type: "front" | "back",
  file: UploadFile,
  fileList: UploadFile[]
) => {
  if (type === "front") idCardForm.frontFileList = fileList;
  else idCardForm.backFileList = fileList;
};
const handleLicenseUpload = (file: UploadFile, fileList: UploadFile[]) => {
  licenseForm.fileList = fileList;
};
const handleLicenseRemove = (file: UploadFile, fileList: UploadFile[]) => {
  licenseForm.fileList = fileList;
};
const handleRemoveFile = (file: UploadFile, type: string) => {
  if (type === "front") {
    idCardForm.frontFileList = idCardForm.frontFileList.filter(
      (f) => f.uid !== file.uid
    );
  } else if (type === "back") {
    idCardForm.backFileList = idCardForm.backFileList.filter(
      (f) => f.uid !== file.uid
    );
  } else {
    licenseForm.fileList = licenseForm.fileList.filter(
      (f) => f.uid !== file.uid
    );
  }
};
const handleExceed = () => ElMessage.error("最多只能上传1个文件");

// 提交与重置方法
const submitIdCard = () => {
  idCardRef.value?.validate((valid) => {
    if (valid) {
      if (
        !idCardForm.isPermanent &&
        (!idCardForm.startDate || !idCardForm.expireDate)
      ) {
        ElMessage.error("请选择证件有效期");
        return;
      }
      if (
        !idCardForm.isPermanent &&
        new Date(idCardForm.startDate) >= new Date(idCardForm.expireDate)
      ) {
        ElMessage.error("开始时间不能晚于失效时间");
        return;
      }
      submitIdCardLoading.value = true;
      setTimeout(() => {
        ElMessage.success("身份证认证提交成功，等待审核");
        submitIdCardLoading.value = false;
      }, 1000);
    }
  });
};
const submitLicense = () => {
  licenseRef.value?.validate((valid) => {
    if (valid) {
      if (
        !licenseForm.isPermanent &&
        (!licenseForm.startDate || !licenseForm.expireDate)
      ) {
        ElMessage.error("请选择证件有效期");
        return;
      }
      if (
        !licenseForm.isPermanent &&
        new Date(licenseForm.startDate) >= new Date(licenseForm.expireDate)
      ) {
        ElMessage.error("开始时间不能晚于失效时间");
        return;
      }
      submitLicenseLoading.value = true;
      setTimeout(() => {
        ElMessage.success("驾驶证认证提交成功，等待审核");
        submitLicenseLoading.value = false;
      }, 1000);
    }
  });
};
const resetIdCardForm = () => {
  ElMessageBox.confirm("确定要重置身份证认证信息吗？", "确认重置", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    resetIdCardLoading.value = true;
    setTimeout(() => {
      Object.assign(idCardForm, {
        name: "",
        idNumber: "",
        startDate: "",
        expireDate: "",
        isPermanent: false,
        frontFileList: [],
        backFileList: [],
      });
      idCardRef.value?.resetFields();
      resetIdCardLoading.value = false;
      ElMessage.success("身份证信息已重置");
    }, 500);
  });
};
const resetLicenseForm = () => {
  ElMessageBox.confirm("确定要重置驾驶证认证信息吗？", "确认重置", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    resetLicenseLoading.value = true;
    setTimeout(() => {
      Object.assign(licenseForm, {
        licenseNumber: "",
        drivingAge: 3,
        startDate: "",
        expireDate: "",
        isPermanent: false,
        fileList: [],
        vehicleInfo: "",
      });
      licenseRef.value?.resetFields();
      resetLicenseLoading.value = false;
      ElMessage.success("驾驶证信息已重置");
    }, 500);
  });
};
const resetProfileForm = () => {
  profileRef.value?.resetFields();
  ElMessage.info("表单已重置");
};

// 手机号与密码修改方法
const openChangePhoneDialog = () => {
  changePhoneVisible.value = true;
  phoneForm.newPhone = "";
  phoneForm.code = "";
  countdown.value = 0;
};
const sendCode = () => {
  if (!/^1[3-9]\d{9}$/.test(phoneForm.newPhone)) {
    ElMessage.error("请输入正确的新手机号");
    return;
  }
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) clearInterval(timer);
  }, 1000);
  ElMessage.success("验证码已发送");
};
const confirmChangePhone = () => {
  phoneRef.value?.validate((valid) => {
    if (valid) {
      changePhoneLoading.value = true;
      setTimeout(() => {
        profileForm.phone = phoneForm.newPhone;
        phoneForm.oldPhone = phoneForm.newPhone;
        changePhoneVisible.value = false;
        changePhoneLoading.value = false;
        ElMessage.success("手机号修改成功");
      }, 1000);
    }
  });
};
const openChangePwdDialog = () => {
  changePwdVisible.value = true;
  Object.assign(pwdForm, { oldPwd: "", newPwd: "", confirmPwd: "" });
};
const confirmChangePwd = () => {
  pwdRef.value?.validate((valid) => {
    if (valid) {
      changePwdLoading.value = true;
      setTimeout(() => {
        changePwdVisible.value = false;
        changePwdLoading.value = false;
        ElMessage.success("密码修改成功，请重新登录");
      }, 1000);
    }
  });
};

const handleBack = () => history.back();
</script>

<style scoped>
/* 基础样式 */
.driver-detail-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}
.date-range-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.flex {
  display: flex;
}
.justify-between {
  justify-content: space-between;
}
.items-center {
  align-items: center;
}
.gap-2 {
  gap: 8px;
}
.w-\[48\%\] {
  width: 48%;
}
.mt-1 {
  margin-top: 4px;
}
.mt-2 {
  margin-top: 8px;
}
.mt-4 {
  margin-top: 16px;
}
.mb-4 {
  margin-bottom: 16px;
}
.mb-6 {
  margin-bottom: 24px;
}
.ml-2 {
  margin-left: 8px;
}
.text-xs {
  font-size: 12px;
}
.text-lg {
  font-size: 18px;
}
.font-bold {
  font-weight: 700;
}

/* 上传区域样式 */
.upload-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.upload-card {
  width: 180px;
  height: 140px;
}
.upload-placeholder {
  width: 100%;
  height: 140px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ddd;
  transition: all 0.3s ease;
  cursor: pointer;
}
.upload-placeholder:hover {
  border-color: #409eff;
  background-color: rgba(64, 158, 255, 0.05);
}
.front-placeholder {
  border-color: #409eff;
  background-color: rgba(64, 158, 255, 0.03);
}
.back-placeholder {
  border-color: #13c2c2;
  background-color: rgba(19, 194, 194, 0.03);
}
.license-placeholder {
  border-color: #722ed1;
  background-color: rgba(114, 46, 209, 0.03);
}
.upload-icon {
  font-size: 24px;
  margin-bottom: 6px;
}
.front-placeholder .upload-icon {
  color: #409eff;
}
.back-placeholder .upload-icon {
  color: #13c2c2;
}
.license-placeholder .upload-icon {
  color: #722ed1;
}
.upload-text {
  font-size: 14px;
  color: #333;
  margin: 0 0 3px 0;
}
.upload-hint {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.upload-preview {
  width: 100%;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.upload-preview:hover .preview-img {
  transform: scale(1.05);
}
.preview-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.upload-preview:hover .preview-mask {
  opacity: 1;
}
.delete-btn {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.9);
  color: #ff4d4f;
  border: none;
  transition: all 0.2s;
}
.delete-btn:hover {
  background: #fff;
  transform: scale(1.1);
}

.upload-desc {
  flex: 1;
  padding-top: 8px;
}
.upload-desc p {
  font-size: 13px;
  color: #666;
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.submit-btn {
  padding: 10px 30px;
  border-radius: 6px;
  background: linear-gradient(135deg, #409eff 0%, #1890ff 100%);
  border: none;
  transition: all 0.3s;
}
.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}
</style>
